<template>
<div class="col-lg-12">
    <div class="ibox ">
        <div class="ibox-content">
            <div id="reportrange" class="form-control">
                <div class="block">
                    <el-checkbox v-model="checked" class="mr-1"></el-checkbox>
                    <label class="col-form-label mr-1">时间段:</label>
                    <el-date-picker
                        v-model="filter_object.dateTime"
                        type="daterange"
                        align="right"
                        size="mini"
                        value-format="yyyy-MM-dd"
                        :unlink-panels="true"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        :disabled="!checked"
                        class="mr-4">
                    </el-date-picker>
                    <label class="col-form-label mr-1" >{{droplist1.title}}</label>
                    <el-select
                        v-if="droplist1.title"
                        v-model="filter_object.select1"
                        @change="select1_changed"
                        size="mini"
                        class="mr-3">
                        <el-option label="所有" value="all"></el-option>
                        <el-option
                            v-for="item in droplist1.data"
                            :key="item.b_version"
                            :label="item.b_version"
                            :value="item.b_version">
                        </el-option>
                    </el-select>
                    <label class="col-form-label mr-1">{{droplist2.title}}</label>
                    <el-select
                        v-if="droplist2.title"
                        v-model="filter_object.select2"
                        size="mini"
                        class="">
                        <el-option label="所有" value="all"></el-option>
                        <el-option
                            v-for="item in droplist2.data"
                            :key="item.b_component"
                            :label="item.b_component"
                            :value="item.b_component">
                        </el-option>
                    </el-select>
                    <el-button
                        icon="el-icon-search" 
                        size="small"
                        type="primary"
                        :loading="searching"
                        @click="search"
                        class=""
                        style="margin-left: 30px;margin-right: 5px;">
                        搜索
                    </el-button>
                </div>
                
            </div>
        </div>
    </div>
</div>  
</template>

<script>
export default {
    props: {
        droplist1: [Array, Object],
        droplist2: [Array, Object],
    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            searching: false,
            month: '',
            week: '',
            checked: false,
            filter_object: {
                dateTime: null,
                select1: 'all',
                select2: 'all',
            },
        }
    },
    methods: {
        search: function() {
            this.$emit('filterChange', this.filter_object);
        },
        select1_changed: function() {
            /* event select1 change handle, pop event select1_change*/
            this.$emit('select1_change', this.filter_object.select1);
        },
        judgeComponent: function(string) {
            if (string == '' || string == null) {
                return '未命名'
            } else {
                return string
            }
        },
        select1_show: function(string) {
            if (string.indexOf(' ')>=0){
                return string.split(' ')[0];
            } else {
                return string;
            }
        }
    },
    watch: {
        checked: function() {
            if (this.checked) {
                // this.month = '';
                // this.week = '';
            } else {
                this.filter_object.dateTime = null;
            }
            this.$emit('filterChange', this.filter_object);
        },
        "filter_object.dateTime": {
            deep: true,
            handler: function() {
                console.log(this.filter_object.dateTime)
            },
        }
    }
};
</script>

<style lang="scss" scoped>
    @import '../../../assets/common/common.scss';
</style>